<template>
  <div class="login">
    <div class="header"> 
      <div class="title">小小的天 有大大的梦想</div>
      <div class="sub-title">一步一步往上爬</div>
    </div>
    <div class="login-wraper">
      <div class="input-item">
        <img src="../assets/img/icon1.png" alt="" class="left-icon">
        <input type="text" v-model="userName">  
        <img src="../assets/img/icon7.png" alt="" class="right-icon" @click="userName=''">              
      </div>
      <div class="input-item">
        <img src="../assets/img/icon2.png" alt="" class="left-icon">
        <input type="password" v-show="isShowPassword" v-model="userPassword">  
        <input type="text" v-show="!isShowPassword" v-model="userPassword">  
        <img src="../assets/img/icon8.png" alt="" class="right-icon open" v-show="isShowPassword" @click="isShowPassword=!isShowPassword">              
        <img src="../assets/img/icon9.png" alt="" class="right-icon close" v-show="!isShowPassword" @click="isShowPassword=!isShowPassword">              
      </div>
      <div class="login-btn" @click="login" v-if="isLogin">登陆</div>
      <div class="login-btn" @click="register" v-else>注册</div>
      <div class="no-account" @click="isLogin = false" v-show="isLogin">没有账号，立即注册。</div>
      <div class="no-account" @click="isLogin = true" v-show="!isLogin">已有账号，立即登录。</div>
    </div>
    <div class="footer">
      <div class="link">联系我：248717607@qq.com</div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      userName: "",
      userPassword: "",
      isShowPassword: true,
      isLogin: true
    };
  },
  methods: {
    ...mapActions({
      _login: "login",
      _register: "register"
    }),
    async login() {
      const res = await this._login({
        name: this.userName,
        password: this.userPassword
      });
      if (res.code == 0) {
        this.$router.push({ name: "Index" });
      } else {
        console.log(res.msg);
      }
    },
    async register() {
      const res = await this._register({
        name: this.userName,
        password: this.userPassword        
      });
      if(res.code==0){
        this.isLogin = true
      }else{
        console.log(res.msg)
      }
    }
  }
};
</script>

<style lang='scss' scoped>
.login {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url("../assets/img/login-bg.png");
  background-size: 100% 100%;
  color: #fff;
  .header {
    margin-top: 2rem;
    padding: 0.1rem 0;
    text-align: center;
    .title {
      font-size: 0.4rem;
    }
    .sub-title {
      font-size: 0.3rem;
    }
  }
  .login-wraper {
    padding: 2rem 0;
    .input-item {
      width: 6rem;
      margin: 0 auto 0.6rem;
      position: relative;
      .left-icon {
        width: 0.4rem;
        position: absolute;
        top: 0.1rem;
        left: 0.2rem;
      }
      input {
        width: 4.3rem;
        height: 0.7rem;
        border: 1px solid #dcdfe6;
        border-radius: 0.04rem;
        padding-left: 0.9rem;
        padding-right: 0.8rem;
      }
      input:focus {
        border: 1px solid #409eff;
      }
      .right-icon {
        width: 0.4rem;
        position: absolute;
        top: 0.15rem;
        right: 0.2rem;
      }
      .open {
        top: 0.2rem;
      }
      .close {
        top: 0.1.4rem;
      }
    }
    .login-btn {
      width: 6rem;
      height: 0.8rem;
      line-height: 0.8rem;
      margin: 0 auto;
      text-align: center;
      background: #f9436f;
      border-radius: 0.04rem;
    }
    .no-account {
      text-align: center;
      font-size: 0.2rem;
      margin: 0.2rem 0;
      color: #c543f9;
    }
  }
  .footer {
    width: 100%;
    height: 0.8rem;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    font-size: 0.2rem;
    color: #fff;
  }
}
</style>
